<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
				</div>
				<div class="flex-end-center-wrap">
					<jk-select v-model="searchParams.processCode" clearable placeholder="工序" value-key-name="code" :option-list="processList" size="small" class="search-bar-item-size1 margin-5-0 item-gap"></jk-select>
					<!-- <jk-select v-model="searchParams.workshopId" :clearable="false" :option-list="workshopList" placeholder="区域" class="search-bar-item-size1 margin-5-0 item-gap"></jk-select> -->
					<!-- <jk-date-picker v-model="searchParams.belongDate" class="search-bar-item-size2 item-gap" :clearable="false" size="small" type="date" value-format="yyyy-MM-dd" placeholder="日期" @change="onDateChange" /> -->
					<jk-date-picker v-model="searchParams.belongDate" type="monthrange" value-format="yyyy-MM" range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份" />
					<!-- <el-select v-model="searchParams.scheduleShiftId" :disabled="!searchParams.belongDate" size="small" clearable placeholder="班次" class="search-bar-item-size3 margin-5-0 item-gap" @change="onScheduleShiftChange">
						<el-option
							v-for="item in scheduleShiftList"
							:key="item.id"
							:label="`${item.shiftName} (${item.beginTime} ~ ${item.endTime})`"
							:value="item.id"
						></el-option>
					</el-select> -->
					<!-- <jk-search-input v-model="searchParams.productionLineNameOrCode" :clearable="false" placeholder="产线编号或名称" class="search-bar-item-size2 margin-5-0 item-gap"></jk-search-input> -->
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>

		<jk-card>
			<el-table
				v-loading="tableLoading"
				:data="tableData"
				style="width: 100%"
				:height="tableHeight + 20"
				size="mini"
			>
				<el-table-column
					v-for="(item, index) in tableHeader"
					:key="index"
					:prop="item.key"
					:label="item.title"
					:align="['code', 'yearMonth'].includes(item.key) ? 'center': 'right'"
				>
					<el-table-column
						v-for="(childItem, childIndex) in item.children"
						:key="childIndex"
						:prop="childItem.key"
						:label="childItem.title"
						align="left"
					></el-table-column>
				</el-table-column>
			</el-table>
			<!-- 分页组件 -->
			<footer ref="box2" class="flex-end-center margin-top-10">
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="searchParams.pageSizes"
					:page-size="searchParams.pageSize"
					:total="searchParams.count"
					@on-change="onPageChange"
				/>
			</footer>
		</jk-card>
	</div>
</template>

<script>
    import calHeight from '/src/mixins/cal-table-height';
    import { pageConfig, formatDate, formatTime } from '/src/utils/jk/jk-tool';
    import getMenuColumn from '../../../mixins/getMenuColumn';
    import handlerCache from '../../../mixins/handler-cache';
    import { productionLineDayData } from '../../../api/production/frontGroupYieldStatistics';
    import { workforcemanagementScheduleShiftByTime } from '../../../api/schedule/empReplacePost';
    import { workforcemanagementScheduleList } from '../../../api/schedule/scheduling';
    import { getworkMonthlySummary } from '../../../api/statistic/workMonthlySummary.js';

    export default {
        name: 'ProductionLineDailyReport',
        components: {
        },
        mixins: [calHeight, getMenuColumn, handlerCache],
        data() {
            return {
                apiItem: {
                    'page': getworkMonthlySummary
                },
                prefix: 'production:prdOrder',
                tableHeader: [
                    {
                        key: 'code',
                        title: '工序'
                    },
                    {
                        key: 'yearMonth',
                        title: '2024-01',
                        children: [
                            {
                                key: 'smoutputM',
                                title: '产量(米)'
                            },
                            {
                                key: 'energyJ',
                                title: '能耗'
                            },
                            {
                                key: 'salaryY',
                                title: '工资'
                            }
                        ]
                    },
                    {
                        key: 'yearMonth',
                        title: '2024-02',
                        children: [
                            {
                                key: 'smoutputM',
                                title: '产量(米)'
                            },
                            {
                                key: 'energyJ',
                                title: '能耗'
                            },
                            {
                                key: 'salaryY',
                                title: '工资'
                            }
                        ]
                    },
                    {
                        key: 'yearMonth',
                        title: '2024-03',
                        children: [
                            {
                                key: 'smoutputM',
                                title: '产量(米)'
                            },
                            {
                                key: 'energyJ',
                                title: '能耗'
                            },
                            {
                                key: 'salaryY',
                                title: '工资'
                            }
                        ]
                    },
                    {
                        key: 'yearMonth',
                        title: '2024-04',
                        children: [
                            {
                                key: 'smoutputM',
                                title: '产量(米)'
                            },
                            {
                                key: 'energyJ',
                                title: '能耗'
                            },
                            {
                                key: 'salaryY',
                                title: '工资'
                            }
                        ]
                    }
                ],
                tableData: [],
                processList: [],
                versionRecordDialogState: false,
                dataId: null,
                workshopList: [],
                tableLoading: true,
                exportLoading: false,
                count: 0,
                searchParams: {
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    belongDate: [],
                    processCode: ''
                },
                scheduleShiftList: []
            };
        },
        mounted() {
            this.workshopList = this.$store.state.user.userWorkshop.workshopList;
            this.processList = this.$store.state.user.userProcess.processList ? this.$store.state.user.userProcess.processList.filter(x => !['QH', 'TB', 'EB', 'MB'].includes(x.code.toUpperCase())) : [];
            this.getDependentData();
        },
        methods: {
            onDateChange() {
                // this.$set(this.searchParams, 'scheduleShiftId', null);
                this.scheduleShiftList = [];
                // this.getDateScheduleShiftOptionRequest();
            },
            onScheduleShiftChange() {},
            onPageChange(pageIndex, pageSize) {
                this.searchParams.pageNo = pageIndex;
                this.searchParams.pageSize = pageSize;
                this.getListRequest();
            },
            onVisibleChange(e) {
                this.versionRecordDialogState = e;
            },
            clearCacheMethod() {
                // Object.assign(this.$data, this.$options.data());
                this.$nextTick(() => {
                    this.getDependentData();
                });
            },
            getDateScheduleShiftOptionRequest() {
                if (this.searchParams.workshopId && this.searchParams.belongDate) {
                    return workforcemanagementScheduleList({
                        belongDate: [this.searchParams.belongDate, this.searchParams.belongDate],
                        workshopId: this.searchParams.workshopId
                    }).then(res => {
                        if (res.data.status === 200) {
                            const resData = res.data.res;
                            if (resData && resData.length) {
                                this.scheduleShiftList = resData[0].scheduleShiftList;
                            }
                        }
                    });
                }
            },
            getScheduleShiftForTimeRequest() {
                if (this.searchParams.workshopId && this.searchParams.belongDate) {
                    return workforcemanagementScheduleShiftByTime({
                        startTime: formatTime(Date.now()),
                        workshopId: this.searchParams.workshopId
                    }).then(res => {
                        if (res.data.status === 200) {
                            const resData = res.data.res;
                            if (resData) {
                                this.$set(this.searchParams, 'scheduleShiftId', resData.id);
                            }
                        }
                    });
                }
            },
            async getDependentData() {
                this.tableLoading = true;
                this.$set(this.searchParams, 'processCode', this.$store.state.user.userProcess.defaultProcessCode);
                this.$set(this.searchParams, 'belongDate', formatDate(Date.now()));
                // console.log(formatDate(Date.now()));
                await this.getMenuColumnListRequest();
                // await this.getDateScheduleShiftOptionRequest();
                // await this.getScheduleShiftForTimeRequest();
                // await this.getListRequest();
                this.tableLoading = false;
            },
            /** 查询列表 */
            getListRequest() {
                if (this.searchParams) {
                    this.tableLoading = true;
                    return this.apiItem['page'](this.searchParams).then(res => {
                        console.log(res);
                        this.tableLoading = false;
                        this.count = res.data.count;
                        if (res.data.status === 200) {
                            if (res.data.res) {
                                // 后端暂时无法动态返回表头和表格数据
                                this.tableData = res.data.res ? res.data.res.map(x => {
                                    if (x.qh) {
                                        for (const key in x.qh) {
                                            x[`qh${key}`] = x.qh[key];
                                        }
                                    }
                                    if (x.sm) {
                                        for (const key in x.sm) {
                                            x[`sm${key}`] = x.sm[key];
                                        }
                                    }
                                    if (x.tb) {
                                        for (const key in x.tb) {
                                            x[`tb${key}`] = x.tb[key];
                                        }
                                    }
                                    if (x.mb) {
                                        for (const key in x.mb) {
                                            x[`mb${key}`] = x.mb[key];
                                        }
                                    }
                                    return x;
                                }) : [];
                            }
                        }
                    });
                }
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                console.log('111111111', this.searchParams.belongDate);
                this.searchParams.pageNo = 1;
                this.searchParams.count = 1;
                this.getListRequest();
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => {
                    return v[j];
                }));
            }
        }
    };
</script>
<style>
    .machine-group-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-left: solid 1px #eee;
        border-top: solid 1px #eee;
        width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 4px;
        flex-shrink: 0;
    }
</style>
